<template>
	<view class="order-detail-info" v-if="orderInfo.typeid">
		<view class="bg"></view>
		<view class="order-type">
			<view class="type-con">				
			<template v-if="orderInfo.status==1">
				<text class="order-title">待付款</text>	
				<text style="margin-left: 100rpx;">订单编号 {{orderInfo.ordersn}}</text>
			</template>
				<template v-if="orderInfo.status==2">					
					<block>
						<text class="order-title">待核销</text>
						<text style="margin-left: 100rpx;">订单编号 {{orderInfo.ordersn}}</text>
						<view class="order-text5">订单已支付：￥<text style="font-size: 80rpx;">{{orderInfo.totalprice}}</text>元</view>
						
					</block>					
				</template>
				<template v-if="orderInfo.status==3">
					<text class="order-title">已关闭</text>
					<text style="margin-left: 100rpx;">订单编号 {{orderInfo.ordersn}}</text>
					<view class="order-text">订单已关闭，请重新下单</view>					
				</template>
				<template v-if="orderInfo.status==6">
					<view class="order-title">退款中</view>
					<view class="order-text">您的退款申请正在审核中</view>					
				</template>
				<template v-if="orderInfo.status==4">
					<text class="order-title">已退款</text>
					<text style="margin-left: 100rpx;">订单编号 {{orderInfo.ordersn}}</text>
					<view class="order-text">商家同意退款申请</view>					
				</template>
				<template v-if="orderInfo.status==5">
					<text class="order-title" style="color: #f50c0c;">已完成</text>
					<text style="margin-left: 100rpx;">订单编号 {{orderInfo.ordersn}}</text>
					<view class="order-text" style="color: #ffc2c2;">此订单已消费</view>	
				</template>
				<template v-if="orderInfo.status==7">
					<view class="order-title">已完成</view>
					<view class="order-text">此订单已消费</view>					
				</template>				
			</view>
		</view>
		<view class="order-info" v-if="orderInfo.typeid != 198">
			<view class="title-bar">订单信息</view>
			<view class="info-con">	
				<view class="product-datas2">
					<view class="datas-item">
						<view class="datas-hd">产品名称</view>
						<view class="datas-bd">{{orderInfo.productname}}</view>
					</view>
				</view>
				<!-- 线路 -->
				<template v-if="orderInfo.typeid==1">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.need_num=='0'">
							<view class="datas-hd">预订人群</view>
							<view class="datas-bd">{{numberStr}}</view>
						</view>
						<view class="datas-item" v-else>
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{numberStr}}</view>
						</view>
						<view class="add-data" v-if="orderInfo.addtionals && orderInfo.addtionals.length">
							<view class="add-tit">附加产品</view>
							<view class="add-con">
								<view class="add-item" v-for="(item,index) in orderInfo.addtionals" :key="index" v-if="item.num>0">
									<view class="name">{{item.additional_name}}</view>
									<view class="num">× {{item.num}}{{item.additional_unit}}</view>
								</view>
							</view>
						</view>
						<view class="order-btn-con" v-if="orderInfo.status==2">
							<block v-if="supplierInfo && (orderInfo.usedate==todayDate() || supplierInfo.issuper=='1')">
								<view class="hxbtn" @click="complete">确定核销</view>
							</block>
							<block v-else>
								<view class="btn" style="color: red;font-size: 40rpx;">不是当天订单 不能核销</view>
							</block>
						</view>
					</view>
				</template>
				
				<!-- 酒店 -->
				<template v-else-if="orderInfo.typeid==2">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">入住日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">离店日期</view>
							<view class="datas-bd">{{orderInfo.departdate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}间{{orderInfo.days}}晚</view>
						</view>
						<view class="order-btn-con" v-if="orderInfo.status==2">
							<block v-if="supplierInfo && (orderInfo.usedate==todayDate() || supplierInfo.issuper=='1')">
								<view class="hxbtn" @click="complete">确定核销</view>
							</block>
							<block v-else>
								<view class="btn" style="color: red;font-size: 40rpx;">不是当天订单 不能核销</view>
							</block>
						</view>
					</view>
					<view class="types-text">如需提前入住/延迟退房，请与酒店协商</view>
				</template>
				
				<!-- 租车 -->
				<template v-else-if="orderInfo.typeid==3">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">用车时间</view>
							<view class="datas-bd">{{orderInfo.usedate.substring(0,16)}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">还车时间</view>
							<view class="datas-bd">{{orderInfo.departdate.substring(0,16)}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">使用时间</view>
							<view class="datas-bd"><text v-if="orderInfo.suit_info.timing<24">{{getDaysDifference(orderInfo.usedate,orderInfo.departdate)}}小时</text><text v-else>{{orderInfo.days}}天</text></view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>					
						<view class="order-btn-con" v-if="orderInfo.status==2">
							<block v-if="supplierInfo && (orderInfo.usedate.substring(0,10)==todayDate()|| supplierInfo.issuper=='1')">
								<view class="hxbtn" @click="complete">确定核销</view>
							</block>
							<block v-else>
								<view class="btn" style="color: red;font-size: 40rpx;">不是当天订单 不能核销</view>
							</block>
						</view>
					</view>
				</template>
				
				<!-- 景点 -->
				<template v-else-if="orderInfo.typeid==5">
					<view class="product-datas" v-for="(item,index) in orderInfo.suits" :key="index">
						<view class="datas-item" v-if="item.suit_name">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{item.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="item.usedate">
							<view class="datas-hd">游玩日期</view>
							<view class="datas-bd">{{item.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{item.dingnum}}</view>
						</view>
						<block v-if="item.planinfo && item.planinfo.godate">
							<view class="datas-item">
								<view class="datas-hd">去程航班</view>
								<view class="datas-bd">{{item.planinfo.godate}}（{{item.planinfo.goPlan}}）</view>
							</view>
							<view class="datas-item" v-if="item.planinfo.zhdate">
								<view class="datas-hd">回程航班</view>
								<view class="datas-bd">{{item.planinfo.zhdate}}（{{item.planinfo.zhPlan}}）</view>
							</view>
							<view class="datas-item">
								<view class="datas-hd">回程航班</view>
								<view class="datas-bd">{{item.planinfo.backdate}}（{{item.planinfo.backPlan}}）</view>
							</view>
						</block>
					</view>	
					<view class="order-btn-con" v-if="orderInfo.status==2">
						<block v-if="supplierInfo && (orderInfo.usedate.substring(0,10)==todayDate()|| supplierInfo.issuper=='1')">
							<view class="hxbtn" @click="complete">确定核销</view>
						</block>
						<block v-else>
							<view class="btn" style="color: red;font-size: 40rpx;">不是当天订单 不能核销</view>
						</block>
					</view>
				</template>
				
				<!-- 渡轮 -->
				<template v-else-if="orderInfo.typeid==888">
					<view class="product-title" style="font-size: 50rpx; color: red;">{{orderInfo.productname}}</view>
					<view class="product-datas" v-for="(item,index) in orderInfo.suits" :key="index">
						<view class="datas-item" v-if="item.suit_name">
							<view class="datas-hd">车辆类型</view>
							<view class="datas-bd">{{item.suit_name}} <text style="color: red; margin:0 10rpx;">x {{item.dingnum}}</text><text style="color: red;">辆</text></view>
						</view>
						<view class="datas-item" v-if="item.usedate">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{item.usedate}}</view>
						</view>
						<view class="datas-item" v-if="item.flight">
							<view class="datas-hd">航班时间</view>
							<view class="datas-bd">{{item.flight}}</view>
						</view>
						
						<view class="datas-item">
							<view class="datas-hd">车辆实付</view>
							<view class="datas-bd" style="color: red;">{{item.price * item.num}}元</view>
						</view>
						<view class="datas-item" v-if="item.drivernum>0">
							<view class="datas-hd">司机人数</view>
							<view class="datas-bd" style="color: red;">{{item.drivernum}}人</view>
						</view>
						<view class="datas-item" v-if="item.drivernum>0">
							<view class="datas-hd">司机实付</view>
							<view class="datas-bd" style="color: red;">{{item.driverprice * item.drivernum}}元</view>
						</view>
						<view class="datas-item" v-if="orderInfo.status==2">
							<view class="datas-hd">支付方式</view>
							<view class="datas-bd">{{orderInfo.paysource}}</view>
						</view>
						<block v-for="item in orderInfo.scenepay">
							<view class="datas-item" v-if="item.productname">
								<view class="datas-hd">补差价</view>
								<view class="datas-bd" style="color: red;">{{item.money}}元</view>
							</view>
							<view class="datas-item" v-if="item.remark">
								<view class="datas-hd">备注</view>
								<view class="datas-bd">{{item.remark}}</view>
							</view>
						</block>						
					</view>	
				</template>
				
				<!-- 团购 -->
				<template v-else-if="orderInfo.typeid==13">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.productname}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
					</view>
				</template>
				
				<!-- 私人定制 -->
				<template v-else-if="orderInfo.typeid==14">
					<view class="product-datas">
						<view class="datas-item" v-if="orderInfo.departure">
							<view class="datas-hd">出发地</view>
							<view class="datas-bd">{{orderInfo.departure}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.destination">
							<view class="datas-hd">目的地</view>
							<view class="datas-bd">{{orderInfo.destination}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">出发日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.adultnum}}成人<block v-if="orderInfo.childnum !=0">,{{orderInfo.childnum}}儿童</block></view>
						</view>
					</view>
				</template>
				
				<!-- 邮轮 -->
				<template v-else-if="orderInfo.typeid==104">
				
					<view class="order-data">
						<view class="position-left">
							<view class="position-i"><text class="date">{{orderInfo.lineInfo.start_time}}</text> {{orderInfo.lineInfo.startcity}}</view>
							<view class="position-i"><text class="date">{{orderInfo.lineInfo.end_time}}</text> {{orderInfo.lineInfo.destcity}}</view>
						</view>
					</view>
					
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">已选房型</view>
							<view class="datas-bd">{{orderInfo.lineInfo.room}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">出发时间</view>
							<view class="datas-bd">{{orderInfo.lineInfo.date}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">房间数量</view>
							<view class="datas-bd">{{orderInfo.lineInfo.dingnum}}间</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订人数</view>
							<view class="datas-bd">{{orderInfo.lineInfo.peoplenum}}</view>
						</view>
					</view>
					
					<view class="add-data" v-if="orderInfo.attach && orderInfo.attach.length">
						<view class="add-tit">附加产品</view>
						<view class="add-con">
							<view class="add-item" v-for="(item,index) in orderInfo.attach" :key="index" v-if="item.num>0">
								<view class="name">{{item.name}}</view>
								<view class="num">× {{item.num}}{{item.unit}}</view>
							</view>
						</view>
					</view>
				
				</template>
					
				<!-- 导游 -->
				<template v-else-if="orderInfo.typeid==106">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">预订时间</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">导游名称</view>
							<view class="datas-bd">{{orderInfo.guide_name}}</view>
						</view>
					</view>
				</template>
				
				<!-- 户外活动 -->
				<template v-else-if="orderInfo.typeid==114">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						
						<view class="datas-item">
							<view class="datas-hd">预订人群</view>
							<view class="datas-bd">{{orderInfo.dingnum}}成人<block v-if="orderInfo.childnum !=0">,{{orderInfo.childnum}}儿童</block></view>
						</view>
					</view>
				</template>
				
				<!-- 特产 -->
				<template v-else-if="orderInfo.typeid==118">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
					</view>
				</template>
				<template v-else-if="orderInfo.typeid==121">
					<view class="product-datas">
						<view class="datas-item" v-if="orderInfo.suit_name">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>						
						<view class="datas-item" v-if="orderInfo.dingnum">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
						<view class="order-btn-con" v-if="orderInfo.status==2">
							<block v-if="supplierInfo">
								<view class="hxbtn" @click="complete">确定核销</view>
							</block>							
						</view>
					</view>
				</template>			
				<!-- 其他根据实际情况填写 -->
				<template v-else>
					<view class="product-datas">
						<view class="datas-item" v-if="orderInfo.suit_name">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">预订时间</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.dingnum">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
						<view class="order-btn-con" v-if="orderInfo.status==2">
							<block v-if="supplierInfo && orderInfo.usedate==todayDate()">
								<view class="hxbtn" @click="complete">确定核销</view>
							</block>
							<block v-else>
								<view class="btn" style="color: red;font-size: 40rpx;">不是当天订单 不能核销</view>
							</block>
						</view>
					</view>
				</template>
			
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 订单详情头部
	 * @property {Boolean} isBtn 是否显示按钮（保险订单详情页使用）
	 * @property {Boolean} typeid 用typeid区分样式
	 * 
	 */
	// #ifdef MP-TOUTIAO
	import zijiePayButton from '@/ttcomponents/DyPayButton/index'
	// #endif
	import {count_down_close_time} from '../utils/utils.js'
	// #ifdef MP-TOUTIAO
	import toutiaoRate from '@/utils/tioutiao_rate.js'
	// #endif
	import { bMapToQQMap } from '@/utils/utils.js';
	export default {
		name: 'stVerifyOrderDetailHeader',
		props: {			
			status: {
				type: Number,
				default: 7
			},			
			typeid: {
				type: Number,
				default: 1
			},
			orderInfo: {
				type: Object,
				default() {
					return {}
				}
			},
			priceInfo: {
				type: Object,
				default() {
					return {}
				}
			},
			supplierInfo: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		components:{			
		},
		data() {
			return {
				numberStr:'', // 数量描述设置
			};
		},
		watch:{
			priceInfo:{
				handler(val) {
					// 显示数量数据
					this.number_show();
				},
				immediate: true
			}
		},
		mounted() {
			
		},
		methods: {	
			getDaysDifference(date1,date2) {
				const day1 = new Date(date1);
				const day2 = new Date(date2);
				// 将日期转换为毫秒
				const millisecondsPerDay = 1000 * 60 * 60;
				const diffInMilliseconds = Math.abs(day2 - day1);
				// 计算相差的天数
				const days = Math.ceil(diffInMilliseconds / millisecondsPerDay);
			
				return days;
			},
			// 显示数量信息
			number_show(){
				let numberArr = [];
				let suit_info = this.orderInfo.suit_info					
				if(this.orderInfo.need_num=='0'){
					if(this.priceInfo.price)
					{
						let people = this.priceInfo.price.people;
						for(let i in people)
						{
							let item = people[i];
							if(item.num > 0 && item.price)
							{
								let str = `${item.name}${item.num}`;
								numberArr.push(str);
							}
						}
						let numberStr = numberArr.join(',');
						this.$set(this,'numberStr',numberStr);
					}
				}else{
					if(suit_info){
						let str = `${this.orderInfo.dingnum}${suit_info.need_num_unit}${suit_info.need_num_name}`
						this.$set(this,'numberStr',str);	
					}
				}
			},
			todayDate() {
			  const today = new Date();
			  const year = today.getFullYear();
			  const month = String(today.getMonth() + 1).padStart(2, '0');
			  const day = String(today.getDate()).padStart(2, '0');
			  return `${year}-${month}-${day}`;
			},			
			//完成
			complete(){
				this.$emit('complete');
			},				
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP-TOUTIAO */
	.toutiao-commemt-btn{
		background-color: #ffc600!important;
	}
	/* #endif */
	
	.order-detail-info {
		position: relative;
		z-index: 1;
		padding: 28rpx 24rpx 0;
		margin-bottom: 24rpx;
		font-size: $uni-font-size-sm;
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			width: 100%;
			height: 260rpx;
			background: linear-gradient(to right, #37a8ff 0%, #2196F3 100%);
			&:after{
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				background: linear-gradient(to bottom, transparent, #f6f6f6);
			}
			
		}

		.order-type {
			padding: 32rpx 24rpx 28rpx;
			margin-bottom: 20rpx;
			background-color: $uni-bg-color;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			z-index: 2;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				z-index: 1;
				height: 98rpx;
				background: linear-gradient(360deg, rgba(255,255,255,0.28) 0%, #a7d8fc 100%);
			}
			.type-con{
				position: relative;
				z-index: 2;
				.order-title {
					font-size: 48rpx;
					font-weight: bold;
					color: #222;
				}
				.order-text{
					font-size: 48rpx;
					font-family: Arial, Arial;
					color: $uni-text-color-grey;
					line-height: 1.83;
					margin-top: 12rpx;
					.count-down{
						color: red;
					}
				}
				.order-text5{
					font-size: 48rpx;
					font-weight: bold;
					color: red;	
					.count-down{
						color: red;
					}
				}
				.order-pay-info{
					@extend .justifyspacec;
					color: $uni-text-color-grey;
					font-size: 48rpx;					
					.left {
						@extend .alignItems;
						.price {
							color: red;
							font-family: Arial, Helvetica, sans-serif;
							font-size: $uni-font-size-base;
							.num{
								font-size: 48rpx;
								font-weight: bold;
							}
						}
						.detail {
							margin-left: 14rpx;
							color: #9e9e9e;
							font-size: $uni-font-size-sm;
							.iconfont {
								margin-right: 6rpx;
								color: $uni-text-color-grey;
								font-size: $uni-font-size-base;
							}
						}
						
					}
				}
				.order-btn-con {
					@extend .displayflex;
					margin-top: 28rpx;
					text-align: center;
					.btn {
						@extend .flex1;
						box-sizing: border-box;
						height: 84rpx;
						line-height: 84rpx;
						border: 2rpx solid #e5e5e5;
						font-size: 30rpx;
						font-weight: bold;
						color: $uni-text-color-grey;
						border-radius: 42rpx;
						&:nth-child(2) {
							margin-left: 20rpx;
						}
						&.btn-yellow {
							color: $uni-text-color-inverse;
							background: linear-gradient(-90deg, #ff644e 0%, #ff8a2a 100%);
							border: none;
						}
					}
				}
			}
		}
		.order-btn-con {
					@extend .displayflex;
					margin-top: 28rpx;
					text-align: center;
					.hxbtn {
						@extend .flex1;
						font-size: 40rpx;
						border-radius: 42rpx;
						color: #fff;
						background: linear-gradient(-90deg, #ff644e 0%, #ff8a2a 100%);
						height: 100rpx;
						font-weight: bold;			
						line-height: 100rpx;														
					}
					.btn {
						@extend .flex1;
						box-sizing: border-box;
						height: 100rpx;
						line-height: 100rpx;
						border: 2rpx solid #e5e5e5;
						font-size: 40rpx;
						font-weight: bold;					
						border-radius: 42rpx;
						&:nth-child(2) {
							margin-left: 20rpx;
						}
						&.btn-yellow {
							color: $uni-text-color-inverse;
							background: linear-gradient(-90deg, #ff644e 0%, #ff8a2a 100%);
							border: none;
						}
					}
				}
		.order-info {
			padding: 28rpx 24rpx 20rpx;
			border-radius: 20rpx;
			background-color: $uni-bg-color;
			position: relative;
			z-index: 2;
			.title-bar{
				line-height: 1.24;
				font-size: 48rpx;
				font-weight: bold;
			}
			.info-con{
				padding-top: 10rpx;
				.product-title{
					line-height: 1.433;
					font-size: $uni-font-size-base;
					color: #222;
					font-weight: bold;
				}
			}
			.product-types{
				margin-bottom: 25rpx;
				font-size: $uni-font-size-base;
			}
			.product-datas{
				margin-top: 10rpx;
				border-bottom: 1px solid #efefef;
				&:last-child{
					border-bottom: none
				}
				.datas-item{
					@extend .displayflex;
					font-size: 40rpx;
					line-height: 1.54;
					
					.datas-hd{
						line-height: 60rpx;
						width: 250rpx;
						
					}					
					.datas-bd{						
						font-size: 40rpx;
						font-weight: bold;
						color: red;
					}
				}
			}
			.product-datas2{
				margin-top: 10rpx;			
				&:last-child{
					border-bottom: none
				}
				.datas-item{
					@extend .displayflex;
					font-size: 40rpx;
					line-height: 1.54;
					
					.datas-hd{
						line-height: 60rpx;
						width: 250rpx;
						
					}					
					.datas-bd{						
						font-size: 40rpx;
						font-weight: bold;
						color: red;
					}
				}
			}
			.date-people-type,
			.booking-type {
				font-size: $uni-font-size-sm;
			}

			.date-people-type {
				margin-bottom: 50rpx;
				color: $uni-text-color-grey;
				font-family: "Arial";

				text {
					&:first-child {
						margin-right: 80rpx;
					}
				}
			}
			.ship-suit-name{
				font-size: $uni-font-size-base;
				margin-bottom: 10rpx;
				color: $uni-text-color-deep;
			}
			.ship-date-people-type{
				margin-bottom: 30rpx;
				color: $uni-text-color-grey;
				font-family: "Arial";
				@extend .justifyspacec
			}
			
			.order-data{
				font-size: 32rpx;
				margin-top: 24rpx;
				padding-left: 24rpx;
				position: relative;
				&:before{
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 63rpx;
					background: url("https://static.member.stourweb.cn/uniapp/static/images/ship-order-line-icon.jpg") no-repeat;
					background-size: contain;
				}
				.position-i{
					margin-bottom: 5rpx;
					@extend .alignItems;
					.date{
						width: 110rpx;
						font-family: Arial, Helvetica, sans-serif
					}
				}
			}
			
			.add-data{
				margin: 30rpx 0;
				.add-tit{
					font-size: 40rpx;
					color: #2dbb55;
				}
				.add-con{
					margin-top: 6rpx;
					.add-item{
						@extend .justifyspacec;
						color: #888;
						font-size: 32rpx;
						padding: 10rpx 0 0;
						.name{
							width: 70%;
							@extend .ellipse;
						}
					}
				}
			}

			

			.types-num {
				@extend .displayflex;
				margin-bottom: 30rpx;
				font-size: $uni-font-size-base;

				.name {
					margin-right: 66rpx;
				}
			}

			.date-info {
				@extend .displayflex;
				margin-bottom: 20rpx;
				text-align: center;
				font-size: $uni-font-size-base;

				.time {
					margin-top: 2rpx;
					font-size: 22rpx;
					color: $uni-text-color-grey;
				}

				.start,
				.end {
					margin: 0 16rpx;
				}

				.day {
					height: 32rpx;
					padding: 0 13rpx;
					margin: 0 30rpx;
					line-height: 32rpx;
					border-radius: 15rpx;
					font-size: $uni-font-size-mini;
					color: $uni-text-color-deep;
					border: 1rpx solid #bfbfbf;
				}
			}

			.types-text {
				font-size: $uni-font-size-mini;
				color: $uni-text-color-grey;
				padding-top: 0.4rem;
			}
		}
	}
	.customize-site{
		margin-bottom: 16rpx;
		.iconfont{
			margin: 0 16rpx;
			color: #474747;
		}
	}
	.num-price{
		margin-bottom: 18rpx;
		font-family: "Arial";
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		.f{
			margin-right: 70rpx;
		}
	}
	.address-item{
		width: 530rpx;
		height: 116rpx;
		border-radius: 10rpx;
		background: url('https://static.member.stourweb.cn/uniapp/static/images/uni-spots-site-bg.png');
		background-size: 100% 100%;
		position: relative;
		flex: 1;
		.text{
			font-size: 24rpx;
			color: #333333;
			line-height: 38rpx;
			margin: 20rpx 90rpx 20rpx 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.icon{
			position: absolute;
			right: 30rpx;
			top: 14rpx;
			bottom: 16rpx;
			.img{
				width: 48rpx;
				height: 48rpx;
			}
			.title-text{
				font-size: 22rpx;
				color: #666666;
				line-height: 38rpx;
			}
		}
	}
</style>
